<template>
  <article class="weui_article">
    <div id="app">
      <schart :canvasId="canvasId"
              :type="type"
              :width="width"
              :height="height"
              :data="data"
              :options="options"
              :radius="radius"
      ></schart>
    </div>
    <div style="text-align: center;">
      <el-button type="info" style="width: 100px;" @click="changetype1">折线</el-button>
      <el-button type="info" style="width: 100px;" @click="changetype2">饼图</el-button>
    </div>
  </article>
</template>

<script scoped>
  import Schart from 'vue-schart';

  export default {
    data() {
      return {
        canvasId: 'myCanvas',
        type: 'line',
        width: 400,
        height: 590,
        data: [
          {name:'短袖', value:1200},
          {name:'休闲裤', value:1222},
          {name:'连衣裙', value:1283},
          {name:'外套', value:1314},
          {name:'羽绒服', value:2314}
        ],
        radius:50,
        options: {
          title: '装修费用统计'
        }
      }
    },
    components: {
      Schart
    },
    created() {
      this.queryData();
      this.changetype2();
    },
    methods: {
      queryData: function () {
        let self = this;
        self.data = [];
        let urlget = global.baseApiUrl + '/ZXXX/selectZInfo';
        self.axios.get(urlget).then(function (response) {
          if (response.data.data.length > 0) {
            let d = response.data.data;
            for (let i = 0; i < d.length; i++) {
              var row = {
                name: d[i].cname,
                value: parseInt(d[i].zh)
              }
              self.data.push(row);
            }
            console.log(self.data);
          }
        });
        console.log(self.data);
      },
      changetype1() {
        this.type = 'line';
      },
      changetype2() {
        this.type = 'pie';
      }
    }
  }
</script>

